import cx from 'classnames';
import React from 'react';

/**
 ** http://know.webhek.com/svg/svg-blur-effects.html
 ** filter: blur(#svgFilter)
 * **/
export default class Blurs extends React.Component<
  React.HTMLAttributes<HTMLSpanElement>
> {
  public render() {
    const {} = this.props;

    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        width="800"
        style={{
          position: 'fixed',
          visibility: 'hidden',
          top: '-1000px',
          pointerEvents: 'none',
        }}
      >
        <defs>
          <filter id="svgFilter">
            <feGaussianBlur
              in="SourceGraphic"
              stdDeviation="10"
              result="blur"
            />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
              result="svgFilter"
            />
            <feComposite in="SourceGraphic" in2="svgFilter" operator="atop" />
          </filter>
          <filter id="svgFilterColor">
            <feGaussianBlur
              in="SourceGraphic"
              stdDeviation="10"
              result="blur"
            />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
              result="svgFilter"
            />
          </filter>
          <filter id="svgFLoad">
            <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 30 -18"
              result="svgFLoad"
            />
          </filter>
        </defs>
      </svg>
    );
  }
}
